<template>
    <view class="container">
        <view class="top">
            <view class="logo"></view>
            <view class="notice-bg">
                <view class="notice">
                    <view class="notice-info">
                        <view class="notice-info-label">公告：</view>
                        <u-notice-bar
                            :text="noticeTextList"
                            color="#7C7C7C"
                            bgColor="#F2F2F2"
                            icon=""
                            fontSize="24rpx"
                            direction="column"
                            class="notice-bar"
                            :duration="3500"
                            @click="$u.route('pages_v2/platformNotice/index')"
                        ></u-notice-bar>
                    </view>
                </view>
            </view>
            <view class="nft-banner" @click="navigateTo(nftBanner.path)">
                <image
                    :src="nftBanner.banner"
                    class="nft-img"
                ></image>
                <view class="nft-mc"></view>
                <view class="nft-info">
                    <view class="nft-info-title">{{ nftBanner.title }}</view>
                    <view class="nft-info-msg">{{ nftBanner.msg }}</view>
                </view>
            </view>
            <view class="activity-notice">
                <view class="activity-info">
                    <view class="activity-title">盲盒抽奖火热进行中</view>
                    <view class="activity-desc">最高可得隐藏款数字藏品和百倍积分</view>
                </view>
                <view class="activity-btn" @click="$u.route({
                    url: 'pages_v2/blindbox/backups/index',
                    type: 'switchTab'
                })">
                    <view class="activity-btn-icon"></view>立即查看
                </view>
            </view>
        </view>
        <view class="old-hot">
            <!--u-sticky :customNavHeight="0" :zIndex="1" bgColor="#F9F9F9"></u-sticky-->
            <view class="h-33"></view>
            <view class="title-hot">积分兑换 • 即将开放</view>
            <u-tabs
                :list="category"
                lineColor="#000000"
                lineWidth="69rpx"
                lineHeight="4rpx"
                activeStyle="font-size: 26rpx;color: #1B1B1B;line-height: 37rpx;"
                inactiveStyle="font-size: 26rpx;color: #7F7F7F;line-height: 37rpx;"
                itemStyle="height: 100rpx;border-bottom: 1px solid #EEEEEE;"
                :current="tabsIndex"
                @change="handleChange"
            ></u-tabs>
            <view class="min-height">
                <u-row v-if="productList.length > 0" customStyle="flex-wrap: wrap;overflow: hidden;margin: 30rpx 0 0 0;" :gutter="20">
                    <u-col v-for="item in productList" :key="item.id" :span="6" class="goods-col">
                        <goods-item :product="item"></goods-item>
                    </u-col>
                </u-row>
                <u-empty
                   mode="data"
                   width="400rpx"
                   height="400rpx"
                   icon="https://img.ionepin.com/dcfe6ae6d90104cbc50c50dd6010c1f8eabee5a3.png"
                   class="empty"
                   v-else
                >
                </u-empty>
                <u-loadmore
                    height="50rpx"
                    :status="loadStatus"
                    v-if="total > 0"
                    marginTop="20rpx"
                    marginBottom="20rpx"
                    fontSize="32rpx"
                    iconSize="34rpx"
                    line
                />
            </view>
        </view>
        <u-popup
            :show="popupNotice && popupShow"
            mode="center"
            :customStyle="{
                width: '600rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="closePopup"
                :extData="extData"
                :p_type="popupType"
            ></popup-context>
        </u-popup>
        <u-back-top
            :scroll-top="scrollTop"
            icon="https://ionepin.oss-accelerate.aliyuncs.com/firstgrade/icon_top.png"
            :iconStyle="{
                width: '142rpx',
                height: '144rpx'
            }"
            right="40rpx"
            bottom="140rpx"
        ></u-back-top>
    </view>
</template>

<script>
    import GoodsItem from "@/components/GoodsItem"
    import { getIndexV2Data, getIndexProductData, getNoticeInfo } from "@/config/api"
    import PopupContext from "@/components/PopupContext"
    // #ifdef APP-PLUS
    import update from '@/uni_modules/uni-upgrade-center-app/utils/check-update'
    // #endif
    export default {
        name: "index",
        components: {
            GoodsItem,
            PopupContext
        },
        data() {
            return {
                tabsIndex: 0,
                notice: [],
                nftBanner: {},
                category: [],
                productQuery: {
                    page: 1,
                    list_rows: 10,
                    categoryId: null
                },
                productList: [],
                total: 0,
                popupShow: false,
                extData: {},
                popupType: "notice",
                scrollTop: 0
            }
        },
        onPageScroll(e) {
            this.scrollTop = e.scrollTop;
        },
        computed: {
          noticeTextList() {
              var text = []
              this.notice.forEach(info => {
                  text.push(info.title)
              })
              return text
          },
          loadStatus() {
              if (this.total > this.productList.length) {
                  return "loading"
              } else {
                  return "nomore"
              }
          },
          popupNotice() {
              if (this.$store.getters.popupNotice) {
                  getNoticeInfo(this.$store.getters.popupNotice).then(res => {
                      this.extData = res
                      if (this.extData.id != this.$store.getters.readNotice) {
                          this.popupShow = true
                      }
                  })
                  return true
              }
              return false
          }
        },
        onLoad() {
            // #ifdef APP-PLUS
            update()
            // #endif
            this.getData()
            this.getProductData()
        },
        async onPullDownRefresh() {
            await this.getData()
            uni.stopPullDownRefresh()
        },
        onReachBottom() {
            if (this.total > this.productList.length) {
                this.productQuery.page += 1
                this.getProductData(false, true)
            }
        },
        onHide() {
            uni.stopPullDownRefresh()
        },
        methods: {
            async getData() {
                const res = await getIndexV2Data()
                this.notice = res.notice
                this.nftBanner = res.nftBanner
                this.category = [{id: null, name: "全部"}, ...res.category]
            },
            async getProductData(first = false, more = false) {
                if (first) {
                    this.productQuery.page = 1
                }
                const res = await getIndexProductData(this.productQuery)
                if (more) {
                    this.productList = [...this.productList, ...res.items]
                } else {
                    this.productList = res.items
                }
                this.total = res.total
            },
            async handleChange(item) {
                uni.showLoading()
                this.productQuery.categoryId = item.id
                await this.getProductData(true)
                uni.hideLoading()
            },
            closePopup() {
                this.$store.dispatch("user/setReadNotice", this.extData.id)
                this.popupShow = false
            },
            navigateTo(path) {
                // #ifdef APP-PLUS
                var platform = plus.os.name
                const version = plus.runtime.version
                if (this.$store.getters.iosVerify=='1' && platform == 'iOS') {
                    return false
                }
                // #endif
                this.$u.route(path)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        background: #FFFFFF;
        .top {
            box-sizing: border-box;
            padding: calc(var(--status-bar-height) + 40rpx) 0 20rpx 0;
            .logo {
                background: url("/static/index-logo.png") no-repeat;
                background-size: 100% 100%;
                width: 166rpx;
                height: 111rpx;
                margin: 0 auto;
            }
            .notice-bg {
                background: #F2F2F2;
                margin: 20rpx auto 30rpx auto;
                padding-bottom: 6rpx;
            }
            .notice {
                height: 50rpx;
                width: 480rpx;
                margin: auto;
                .notice-info {
                    display: flex;
                    margin: 0 auto;
                    align-items: center;
                    padding: 8rpx 0;
                    .notice-info-label {
                        font-size: 24rpx;
                        font-weight: 400;
                        color: #7C7C7C;
                    }
                    .notice-bar {
                        padding: 0;
                    }
                }
            }
            .nft-banner {
                width: 698rpx;
                height: 698rpx;
                margin: auto;
                position: relative;
                margin-bottom: 25rpx;
                .nft-img {
                    width: 100%;
                    height: 100%;
                }
                .nft-mc {
                    position: absolute;
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    background: url("https://img.ionepin.com/9116d7003f3cd0ec893583e41ceecb5ad9d2d856.png") no-repeat;
                    background-size: 100% 100%;
                }
                .nft-info {
                    position: absolute;
                    left: 0;
                    right: 0;
                    bottom: 70rpx;
                    .nft-info-title {
                        text-align: center;
                        font-size: 42rpx;
                        font-family: PingFang-SC-Bold, PingFang-SC;
                        font-weight: bold;
                        color: #FFFFFF;
                        line-height: 1.5;
                        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
                    }
                    .nft-info-msg {
                        text-align: center;
                        font-size: 32rpx;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #FFFFFF;
                        line-height: 1.5;
                        text-shadow: 0px 2rpx 4rpx rgba(0, 0, 0, 0.5);
                    }
                }
            }
        }
        .activity-notice {
            box-sizing: border-box;
            background: url("https://img.ionepin.com/32f0fbb846f212994cb7767e627b76935b407122.png") no-repeat;
            background-size: 100% 100%;
            height: 150rpx;
            margin: 0 26rpx;
            display: flex;
            align-items: center;
            padding-left: 33rpx;
            .activity-info {
                .activity-title {
                    font-size: 32rpx;
                    font-weight: 400;
                    color: #FFFFFF;
                    line-height: 45rpx;
                }
                .activity-desc {
                    font-size: 26rpx;
                    font-weight: 400;
                    color: #ABA4AA;
                    line-height: 37rpx;
                }
            }
            .activity-btn {
                box-sizing: border-box;
                width: 202rpx;
                height: 50rpx;
                background: #FFFFFF;
                box-shadow: 0 2rpx 11rpx 0 rgba(103, 161, 255, 0.5);
                border-radius: 29rpx;
                font-size: 28rpx;
                font-weight: 400;
                color: #282639;
                text-align: right;
                line-height: 2;
                position: relative;
                margin-left: 20rpx;
                padding-right: 22rpx;
                .activity-btn-icon {
                    position: absolute;
                    width: 44rpx;
                    height: 61rpx;
                    background: url("https://img.ionepin.com/ed0b32ed98e09e04eb0ec70e9185e602e972ec92.png") no-repeat;
                    background-size: 100% 100%;
                    left: 17rpx;
                    bottom: 2rpx;
                }
            }
        }
        .old-hot {
            background: #F9F9F9;
            padding: 0 20rpx 10rpx 20rpx;
            .h-33 {
                height: 33rpx;
            }
            .title-hot {
                //background: url("https://img.ionepin.com/3a83f282eb8af385670088713fb71d39ae036bed.png") no-repeat;
                background-size: 100% 100%;
                //width: 220rpx;
                //height: 34rpx;
                text-align: center;
                font-size: 30rpx;
                margin: 0 auto 39rpx auto;
            }
            .goods-col {
                margin-bottom: 26rpx;
            }
            .empty {
                padding: 50rpx 0;
            }
        }
    }
</style>
